<template>
  <div>
    <div class="head_top">
      <div class="head_top_center">
        <div class="logoImg"> <img :src="logoImg" alt=""></div>
        <div class="head_top_rt">
          <a href="#" @mouseover="displayMessage(1,true)" @mouseout="displayMessage(1,false)" class="head_top_rt_message"><i class="el-icon-chat-dot-round" style="font-size:30px"></i></a>

          <a href="#" class="head_top_rt_message"> <i class="el-icon-upload" style="font-size:30px"></i></a>
          <div style="height:60px" @mouseover="displayMessage(2,true)" @mouseout="displayMessage(2,false)"><img :src="user" alt="" class="user_img"></div>

          <div v-show="message" class="message" @mouseover="displayMessage(1,true)" @mouseout="displayMessage(1,false)">
            <ul class="mine_ul">
              <li>评论</li>
              <li>粉丝</li>
              <li>消息</li>
              <li>系统通知</li>
            </ul>
          </div>
          <div v-show="userInfo" class="userInfo" @mouseover="displayMessage(2,true)" @mouseout="displayMessage(2,false)">
            <ul class="mine_ul">
              <li>信息设置</li>
              <li>已关注作品</li>
              <li>我的粉丝</li>
              <li>我的收藏</li>
              <li>退出</li>
            </ul>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import logo from "@/static/picture/head/logo.png"
import user from "@/static/picture/head/user.png"

export default {
  data() {
    return {
      logoImg: logo,
      user: user,
      message: false,
      userInfo: false,
    }
  },
  methods: {
    displayMessage(type, boolean) {
      if (type == 1) {
        this.message = boolean;
      } else {
        this.userInfo = boolean
      }

    },

  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.head_top {
  background-color: rgb(9, 8, 16);
  height: 60px;
}
.head_top_center {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.head_top_rt {
  display: flex;
  justify-content: space-around;
  position: relative;
}
.head_top_rt a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 15px;
}
.head_top_rt a:nth-child(2) {
  padding-right: 30px;
}
.user_img {
  width: 40px;
  height: 40px;
  margin: 10px 0 15px 0;
  border-radius: 50%;
}
.user_img:hover {
  cursor: pointer;
}
.logoImg {
  line-height: 70px;
}
.mine_ul:first-child {
  border-top: 3px solid #f43700;
}
.message {
  position: absolute;
  top: 60px;
  border: 1px solid rgb(192, 192, 192);
  width: 90px;
  box-shadow: 0 0 2px #666;
  /* display: none; */
  text-align: left;
  /* padding-left:5px ; */
  left: -20px;
  z-index: 9999;
  background-color: #fff;
}
.userInfo {
  position: absolute;
  top: 60px;
  /* left: 150px; */
  right: -30px;
  border: 1px solid rgb(192, 192, 192);
  width: 100px;
  box-shadow: 0 0 2px #666;
  /* display: none; */
  text-align: left;
  /* padding-left:5px ; */
  z-index: 9999;
  background-color: #fff;
}
.mine_ul > li {
  padding-left: 12px;
  padding-top: 10px;
  cursor: pointer;
  font-size: 14px;
}
.mine_ul > li:last-child {
  padding-bottom: 10px;
}
.head_top_rt_message:hover {
  color: #f43700;
  position: relative;
  /* animation-name: exampel;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) */
}
/* @keyframes exampel {
  0% {
    color: #fff;
    top: 60px;
  }
  25% {
    color: #f43700;
    top: -100px;
  }
  50% {
    color: #f43700;
    top: -100px;
  }
  75% {
    color: #f43700;
    top: -100px;
  }
  100% {
    color: #f43700;
    top: -100px;
  }
} */

/* .clear{
    display: block;
} */

</style>